<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>抽奖</title>

    <!-- 这里是css部分 -->

    <style>
        #bg {
            width: 650px;
            height: 600px;
            margin: 0 auto;
            background: url(turntable-bg.jpg) no-repeat;
            position: relative;
        }

        img[src^="201608150908502"] {
            position: absolute;
            z-index: 10;
            top: 155px;
            left: 247px;
        }

        img[src^="201608150908514"] {
            position: absolute;
            z-index: 5;
            top: 60px;
            left: 116px;
            transition: all 4s;
        }
    </style>
</head>

<body>
    <!-- 这里是HTML结构部分 -->

    <div id="bg">
        <img src="201608150908502.png" alt="pointer">
        <img src="201608150908514.png" alt="turntable">
    </div>

    <!-- 这里是js部分 -->

    <script>
        var oPointer = document.getElementsByTagName("img")[0];
        var oTurntable = document.getElementsByTagName("img")[1];
        var cat = 51.4;
        var num = 0;
        var offOn = true;
        document.title = "";

        oPointer.onclick = function () {
            if (offOn) {
                oTurntable.style.transform = "rotate(0deg)";
                offOn = !offOn;
                ratating();
            }
        }

        function ratating() {
            var timer = null;
            var rdm = 0;
            clearInterval(timer);
            timer = setInterval(function () {
                if (Math.floor(rdm / 360) < 3) {
                    rdm = Math.floor(Math.random() * 3600);
                } else {
                    oTurntable.style.transform = "rotate(" + rdm + "deg)";
                    clearInterval(timer);
                    setTimeout(function () {
                        offOn = !offOn;
                        num = rdm % 360;
                        console.log(num, rdm)
                        if (num <= cat * 1) {
                            alert("4999元");
                        } else if (num <= cat * 2) {
                            alert("条50元");
                        } else if (num <= cat * 3) {
                            alert("10元");
                        } else if (num <= cat * 4) {
                            alert("5元");
                        } else if (num <= cat * 5) {
                            alert("免息服务");
                        } else if (num <= cat * 6) {
                            alert("提交白金");
                        } else if (num <= cat * 7) {
                            alert("未中奖");
                        }
                    }, 4000);
                }
            }, 30);
        }
    </script>
</body>

</html>